import cx from 'classnames';
import React from 'react';
import styles from './index.less';
interface States {
  status?: 'success';
}
interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {
  active?: boolean;
}
export default class ButtonShining extends React.Component<ViewProps, States> {
  public state: States = {};
  public render() {
    const { active, className, children, ...restProps } = this.props;
    const { status } = this.state;
    return (
      <button
        className={cx(
          styles.button,
          {
            [styles.success]: status == 'success',
          },
          className,
        )}
        {...restProps}
        onClick={this.handleClick}
      >
        <span className={styles.after}></span>
        <span className={styles.before}></span>
        <span className={styles.inner}>
          <span className={styles.txtClip}>
            <span className={styles.txt}>彩·色·按·钮</span>
          </span>
          <span className={styles.txtClip}>
            <span className={styles.txt}>成·功·完·成</span>
          </span>
        </span>
      </button>
    );
  }
  private handleClick = (e) => {
    const { onClick } = this.props;
    this.setState({
      status: this.state.status == 'success' ? undefined : 'success',
    });
    onClick && onClick(e);
  };
}
